<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('通过默认插槽插入内容')}`">{{ $t('通过默认插槽插入内容') }}</t>
        </template>
        <sib-dropdown :options="dropdownData" @change="onchange">
            <div class="example-drop-content-box">
                <el-avatar icon="Avatar"></el-avatar>
                <p class="userName">管理员</p>
                <el-icon><CaretBottom></CaretBottom></el-icon>
            </div>
        </sib-dropdown>
    </example>
</template>

<script>
import { ElMessage } from 'element-plus';

export default {
    setup() {
        return {
            dropdownData: [
                {
                    label: '个人资料',
                    value: '1',
                },
                {
                    label: '修改密码',
                    value: '2',
                },
                {
                    label: '切换用户',
                    value: '3',
                },
                {
                    label: '退出登录',
                    value: '4',
                },
            ],
            onchange(option) {
                ElMessage.info(`当前已选择: ${JSON.stringify(option)}`);
                console.log('当前已选择', option);
            },
            templateString: `<template>
    <div class="example-box">
        <sib-dropdown :options="dropdownData" @change="onchange">
            <div class="example-drop-content-box">
                <el-avatar icon="Avatar"></el-avatar>
                <p class="userName">管理员</p>
                <el-icon><CaretBottom></CaretBottom></el-icon>
            </div>
        </sib-dropdown>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus';

export default {
    setup() {
        return {
            dropdownData: [
                {
                    label: '个人资料',
                    value: '1',
                },
                {
                    label: '修改密码',
                    value: '2',
                },
                {
                    label: '切换用户',
                    value: '3',
                },
                {
                    label: '退出登录',
                    value: '4',
                },
            ],
            onchange(option) {
                ElMessage.info(\`当前已选择: \${JSON.stringify(option)}\`);
                console.log('当前已选择', option);
            },
        },
    },
};
<\/script>

<style lang="scss">
.example-box {
  .sib-dropdown {
    .drop-content-box {
      display: flex;
      align-items: center;
      .userName {
        margin: 0 10px;
      }
    }
  }
}
</style>`,
        };
    },
};
</script>

<style lang="scss">
.example-drop-content-box {
    display: flex;
    align-items: center;
    .userName {
        margin: 0 3px 0 10px;
    }
    .el-icon {
        font-size: 16px;
        position: relative;
        top: -1px;
    }
}
</style>
